import React, { useEffect, useState } from 'react';
import {
  List,
  WingBlank,
} from 'antd-mobile';

const { Item } = List;

function Device() {
  const d: BaseObject = {};
  const app: BaseObject = {};
  const network: BaseObject = {};
  const [deviceInfo, setDeviceInfo] = useState(d);
  const [appInfo, setAppInfo] = useState(app);
  const [networkInfo, setNetworkInfo] = useState(network);
  useEffect(() => {
    window.HWH5.getDeviceInfo().then((data) => {
      setDeviceInfo(data);
      console.log(data);
    }).catch((error) => {
      console.log('获取设备信息异常', error);
    });
    window.HWH5.getAppInfo().then((data) => {
      setAppInfo(data);
      console.log(data);
    }).catch((error) => {
      console.log('获取APP信息异常', error);
    });
    window.HWH5.getNetworkType().then((data) => {
      setNetworkInfo(data);
      console.log(data);
    }).catch((error) => {
      console.log('返回网络状态异常', error);
    });
  }, []);
  return (
    <WingBlank>
      <List renderHeader={() => '系统信息'}>
        {Object.keys(deviceInfo).map((name: string) => (
          <Item extra={deviceInfo[name]}>{name}</Item>
        ))}
      </List>
      <List renderHeader={() => 'APP的信息'}>
        {Object.keys(appInfo).map((name: string) => (
          <Item extra={appInfo[name]}>{name}</Item>
        ))}
      </List>
      <List renderHeader={() => '网络的信息'}>
        {Object.keys(networkInfo).map((name: string) => (
          <Item extra={networkInfo[name]}>{name}</Item>
        ))}
      </List>
    </WingBlank>
  );
}

export default Device;
